<template>
    <div>
      <div v-if="tableConfig.topOperate" class="tab-operator">
        <slot name="tableExtraOperate"></slot>
      </div>
      <!--<div v-if="!tableConfig.isTreeTable" class="tab-box">-->
      <div class="tab-box">
        <!--普通列表-->
        <el-table
          ref="searchTable"
          :data="tableData"
          v-loading="loading"
          element-loading-text="加载中，请稍后..."
          element-loading-spinner="el-icon-loading"
          highlight-current-row
          class="table temp-table"
          style="width: 100%"
          @selection-change="handleSelectionChange">
       <!--   <el-table-column v-if="tableConfig.isIndex" label="序号" type="index" width="55">
            <template slot-scope="scope">
              {{(scope.$index + 1) + pagination.pageSize * (pagination.pageNumber - 1)}}
            </template>
          </el-table-column>-->

          <el-table-column v-if="!tableConfig.isRadio" type="selection" width="55">
          </el-table-column>

          <el-table-column v-if="tableConfig.isRadio" width="55">
            <template slot-scope="scope">
<!--              <el-radio :label="scope.$index" v-model="templateRadio" @change.native="getTemplateRow(scope.$index, scope.row)">&nbsp</el-radio>-->
              <el-radio :label="scope.$index" v-model="templateRadio" @change.native="getTemplateRow(scope.$index, scope.row)"></el-radio>
            </template>
          </el-table-column>

          <template v-for="(item, index) in tableConfig.columnConfig">
            <!---->
            <template v-if="item.isSlot">
              <el-table-column
                :key="index"
                :formatter="item.formatter"
                :width="item.width"
                :sortable="item.isSort"
                :prop="item.prop"
                :label="item.label">
                <template slot-scope="scope">
                  <slot v-if="item.isSlot" :name="item.prop" :row="scope.row" />
                </template>
              </el-table-column>
            </template>

            <!--非操作栏-->
            <template v-else>
              <el-table-column
                v-if="item.prop !== 'operator'"
                :key="index"
                :formatter="item.formatter"
                :width="item.width"
                :sortable="item.isSort"
                :prop="item.prop"
                :label="item.label">
                <!--<slot v-if="item.formatter" :name="item.prop" v-html="item.formatter"></slot>-->
              </el-table-column>
              <!--操作栏-->
              <el-table-column
                v-if="item.prop === 'operator'"
                :key="index"
                :fixed="item.fixed"
                :width="item.width"
                :prop="item.prop"
                :label="item.label"
                class="operator">
                <template slot-scope="scope">
                  <slot name="tableOperator" :row="scope.row" />
                </template>
              </el-table-column>
            </template>
          </template>
        </el-table>

      </div>
    </div>
</template>

<script>
    export default {
      name: "index",
      props: {
        loading:{
          type:Boolean,
          default:false
        },
        tableData:{
          type:Array,
          default() {
            return [];
          }
        },
        tableConfig: {
          type: Object,
          default() {
            return {}
          }
        },
        isFeed: {
          type: Boolean,
          default: true
        }
      },
      computed:{

      },
      data() {
        return {
          templateRadio: '',
          selectedRows: [], // 多选
          selectedRow:[]   // 单选
        }
      },
      methods:{
        // 多选勾选数据
        handleSelectionChange(rows) {
          console.log("rows",rows)
          this.selectedRows = []
          this.selectedRows = rows
        },
        // 单选
        getTemplateRow(index, row) {
          console.log("index,row",index,row)
          this.selectedRow = []
          this.selectedRow.push(row)
          console.log(this.selectedRow)
        },
      }
    }
</script>

<style scoped lang="scss">
  /*表格换行显示*/
  .el-table .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /*隐藏单选框的文字*/
  ::v-deep .el-radio__label{
   display: none;
  }
</style>
